<style>
    .twoDiv{
        padding: 10px 0px;
        border-bottom: 1px solid #f6f6f6;
        color: #333;
        height: 60px;
    }
    .three{
        height: 500px;
        padding: 10px 0px;
    }
</style>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-header">新增跟踪</div>

                        <div class="layui-card-body">
                            <div class="twoDiv ">
                                <form class="layui-form layui-form-pane" action="#" lay-filter="example">
                                    <div class="layui-col-md3">
                                        <div class="layui-form-item">
                                            <label class="layui-form-label">运单号：</label>
                                            <div class="layui-inline">
                                                <input type="text" id="waybill_id" autocomplete="off" class="layui-input">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="layui-col-md4">
                                        <div class="layui-form-item">
                                            <label class="layui-form-label">起止日期：</label>
                                            <div class="layui-inline">
                                                <div class="layui-input-inline" style="width: 100px;">
                                                    <input type="date" name="datearrival" id="date"  placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
                                                </div>
                                                <div class="layui-form-mid">-</div>
                                                <div class="layui-input-inline" style="width: 100px;">
                                                    <input type="date" name="consigndate" id="date1"  placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="layui-col-md3">
                                        <div class="layui-form-item">
                                            <label class="layui-form-label">跟踪类型：</label>
                                            <div class="layui-inline">
                                                <select id="substationUnit">
                                                    <option value="请选择">请选择</option>
                                                    <option value="未装载">未装载</option>
                                                    <option value="装车中">装车中</option>
                                                    <option value="已发车">已发车</option>
                                                    <option value="派送中">派送中</option>
                                                    <option value="装车完毕">装车完毕</option>
                                                    <option value="直接签收">直接签收</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="layui-col-md2">
                                        <div class="layui-form-item">
                                            <button class="layui-btn" lay-submit lay-filter="formDemo">运单搜索</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <div class="three" >
                                <table class="layui-hide" id="test" lay-filter="test"></table>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button type="button" class="layui-btn layui-btn-sm" lay-event="isAll">新增跟踪</button>
    </div>
</script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script>
    layui.use(['table', 'form', 'jquery', 'layer', 'tree','util'], function () {
        var form = layui.form;
        var $ = layui.jquery;
        var table = layui.table;

        form.render();
        table.render({
            elem: '#test',
            height:500,
            id:'yi'
            ,url:'../../XclTailAfterControllerGetXclTailAfterAll'
            ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            ,title: '新增跟踪数据表'
            ,cols: [[
                {type: 'checkbox', fixed: 'left'}
                ,{field:'tailAfter', title:'序列号', width:180, fixed: 'left', unresize: true, sort: true}
                ,{field:'waybill_id', title:'运单id', width:120, edit: 'text'}
                ,{field:'tailAfter_time', title:'跟踪时间', width:180, edit: 'text', sort: true}
                ,{field:'state', title:'跟踪状态', width:180}
                ,{field:'sub_name', title:'分站名称', width:180}
                ,{field:'consignDate', title:'托运日期', width:180, sort: true}
                ,{field:'arrivalCity', title:'到达城市', width:180}
                ,{field:'descriptionGoods', title:'货物名称', width:180, sort: true}
                ,{field:'quantity', title:'数量', width:120}
                ,{field:'forwardingUnit', title:'收货单位', width:240}
                ,{field:'forwardingUniter', title:'发货单位', width:220}
                ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
            ]]
            ,page: true
        });

        //新增跟踪
        table.on('toolbar(test)', function(obj){
            layer.open({
                type: 2,
                title: '订单派送',
                shadeClose: true,
                shade: 0.8,
                area: ['500px', '300px'],
                content: '/src/views/trackManagement/iframe/addTailAfterTwo.html?'//iframe的url
            });
            return false;
            /*switch(obj.event){
                case 'isAll':
                    alert("!")

                    break;
            };*/
        });

        //搜索
        form.on('submit(formDemo)', function(data){
            //高级查询(第一个表单事件)
            //执行重载
            table.reload('yi', {
                page: {
                    curr: 1 //重新从第 1 页开始
                }
                //根据条件查询
                ,where: {
                    waybill_id:$("#waybill_id").val(),
                    state:$('#substationUnit option:selected').val(),
                    startDate:$("#date").val(),
                    endingDate:$("#date1").val(),
                    id:"1"
                }
            });
            return false;
        });

        //监听行工具事件
        table.on('tool(test)', function(obj){
            var data = obj.data;
            if(obj.event === 'del'){
                $.ajax({
                    url: "../../XclTailAfterControllerDeleteXclTailAfter",
                    type: "post",
                    data: {
                        id:data.tailAfter
                    },
                    dataType: "text",
                    success: function (data) {
                        //上述方法等价于
                        table.reload('yi');
                    }
                })
            } else if(obj.event === 'edit'){
                layer.open({
                    type: 2,
                    title: '订单派送',
                    shadeClose: true,
                    shade: 0.8,
                    area: ['500px', '300px'],
                    content: '/src/views/trackManagement/iframe/updateTailAfter.html?id='+data.tailAfter//iframe的url
                });
            }
        });


    });
</script>


